<template>
  <div class="app-container">

    <!-- 查询区域 -->
    <el-form :inline="true" :model="RetrieveData" class="demo-form-inline">
      <el-form-item label="账号">
        <el-input v-model="RetrieveData.username" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="RetrieveData.password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item label="身份">
        <el-select v-model="RetrieveData.identity" placeholder="身份">
          <el-option label="管理员" value="管理员"></el-option>
          <el-option label="学生" value="学生"></el-option>
          <el-option label="老师" value="老师"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="onSubmit()">查询</el-button>
      </el-form-item>
    </el-form>


    <!-- 添加 -->
    <div align="left">
      <el-button type="primary" @click="handleAddRole()">
        添加用户
      </el-button>
      <el-button type="primary" @click="flash()">刷新</el-button>
      <el-button type="primary" @click="close()">关闭网页</el-button>
      <!-- <el-button type="success" @click="bottom()">返回底部</el-button> -->
    </div>


    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label="序号" width="200">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="账号" width="280" align="center">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column label="密码" width="280" align="center">
        <template slot-scope="scope">
          {{ scope.row.password }}
        </template>
      </el-table-column>
      <el-table-column label="身份" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.identity }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="310" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="modifyById(scope.row.id,scope.row.username,scope.row.password,scope.row.identity)">
            修改
          </el-button>
          <el-button type="danger" size="mini" @click="deleteById(scope.$index,scope.row)">
            删除
          </el-button>
        </template>

      </el-table-column>
    </el-table>
    <!--分页区域-->
    <div class="el-pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[6, 10, 12, 14]"
        :page-size="6" layout="total, sizes, prev, pager, next, jumper" :total="50">
      </el-pagination>

    </div>
    <el-button type="success" @click="top()">返回顶部</el-button>


    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑':'添加'">
      <el-form :model="all" label-width="80px" label-position="left">
        <el-form-item label="账号">
          <el-input v-model="all.username" placeholder="帐号" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="all.password" placeholder="密码" />
        </el-form-item>
        <el-form-item label="身份">
          <el-input v-model="all.identity" placeholder="身份" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import {
    getList
  } from '../../../../api/all/tableAll.js'
  import{
    delTableRow
  }from '../../../../api/all/tableAll.js'

  const defaultRole = {
    username: '',
    password: '',
    identity: '',
  }
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        list:[
          {
            "dateCreated": 1597422059425,
            "dateModified": 1597422059425,
            "deleted": null,
            "entityName": null,
            "id": 41,
            "username": "admin2",
            "password": "admin2",
            "identity": "admin2",
          }
        ],
        RetrieveData: {
          username: '',
          password: '',
          identity: ''
        },
        all: Object.assign({}, defaultRole),
        dialogVisible: false,


      }
    },
    created() {
      this.fetchData()
    },
    methods: {

      fetchData() {
        var vm = this;
        getList().then(res => {
          console.log("tableAll数据获取成功");
          vm.list = res.content;
        })
      },

      handleAddRole() {
        this.all = Object.assign({}, defaultRole)
        this.dialogVisible = 'new'
        this.dialogVisible = true
      },

      deleteById(idx, row) {
        alert("删除成功");
        console.log("索引", idx);
        console.log("第",row,"行数据");
        console.log(row.id)
        delTableRow(row.id).then((res) =>{
          console.log(res)
        })

      },

      modifyById(id, username, password, identity) {
        this.$router.push("/form/all/editAll/index/" + id)
      },

      onSubmit() {
        alert("查询失败");
      },

      async confirm() {
        this.dialogVisible = false
      },

      // 分页区域
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }

    }
  }
</script>
